<template>
    <div class="onlyData-span">
        <template v-if="valueKindId === '1'">
            {{ itemData.itemValue }}
        </template>
        <template v-else-if="valueKindId === '2'">
            {{ itemData.itemValue }}
        </template>
        <template v-else-if="valueKindId === '12'">
            {{ itemData.itemValue }}
        </template>
        <template v-else-if="valueKindId === '11'">
            {{ itemData.itemValue }}
        </template>
        <template v-else-if="valueKindId === '3'">
            {{ itemData.itemValue }}
        </template>
        <template v-else-if="valueKindId === '4'">
            <span @click="showAddress" class="project-address">{{ Array.isArray(itemData.extData) ? "" : itemData.extData.cityName || '' + itemData.extData.cityAddress || '' }}</span>
        </template>
        <template v-else-if="valueKindId === '5'">
            <img v-if="itemData.extData.length && itemData.extData[0].includes($staticUrl)" @click="previewImg(itemData.extData)" :src="itemData.extData[0]" alt="">
            <img v-if="itemData.extData.length && !itemData.extData[0].includes($staticUrl)" @click="previewImg(itemData.extData)" :src="$staticUrl + '/' + itemData.extData[0]" alt="">
        </template>
        <template v-else-if="valueKindId === '6'">
            {{ itemData.itemValue }}
        </template>
        <template v-else-if="valueKindId === '7'">
            {{ itemData.itemValue }}
        </template>
        <template v-else-if="valueKindId === '8'">
            <el-button style="padding: 0" v-if="itemData.extData.length" type="text" @click="previewVideo(itemData.extData, 'record')">播放</el-button>
        </template>
        <template v-else-if="valueKindId === '9'">
            <el-button style="padding: 0" v-if="itemData.extData.length" type="text" @click="previewVideo(itemData.extData, 'record')">播放</el-button>
        </template>
        <template v-else-if="valueKindId === '10'">
            <el-link
                class="table-file"
                v-for="(it, idx) in itemData.extData"
                :key="idx"
                type="primary"
                :href="$staticUrl + '/' + it"
                target="_blank">
                文件{{ idx + 1 }}
            </el-link>
        </template>
        <map-location ref="MapLocation"></map-location>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import MapLocation from "@/components/map-location/index.vue";
import { dialogPreviewImg } from "@/components/public/preview-img/index";
import { dialogPreviewVideoAudio } from "@/components/public/preview-video-audio/index";

@Component({
    components: {
        MapLocation
    }
})
export default class ContentView extends Vue {
    @Prop({ default: "" }) readonly valueKindId!: string;
    @Prop({ default: () => { return {}; } }) readonly itemData!: any;

    showAddress() {
        const { latitude, longitude, cityAddress }: any = this.itemData.extData;
        (this.$refs.MapLocation as any).show({
            longitude: longitude,
            latitude: latitude,
            cityAddress: cityAddress
        }, "readonly");
    }

    // 图片预览
    previewImg(urls: any) {
        const list = urls.map((item: any) => item.includes(this.$staticUrl) ? item : this.$staticUrl + "/" + item);
        dialogPreviewImg({ title: "预览图片", current: list });
    }

    // 视频预览
    previewVideo(file: any) {
        dialogPreviewVideoAudio({
            sourceUrl: file[0].includes(this.$staticUrl) ? file[0] : this.$staticUrl + "/" + file[0]
        });
    }
}
</script>

<style lang="scss" scoped>
    .project-address {
        cursor: pointer;
        color: #de2728;
        text-decoration: underline #de2728;
    }
</style>
